<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>

    <script>
        const box = document.getElementById('box')
        /* 注意事件挂载的节点 */
        /* click:按下且松开后触发 */
        /* box 根据实际情况改动 */
        box.onmousedown = () => {
            /* 鼠标按下的时候，让windows监听鼠标移动的事件 */
            window.onmousemove = () => {
                /* 在这里写业务逻辑 */
                console.log('移动');
            }
            /* 在鼠标抬起时，解除鼠标移动的事件 */
            window.onmouseup = () => {
                /* 在这里释放资源 */
                window.onmousemove = null
                console.log('鼠标抬起触发');
            }
        }
    </script>
</body>

</html>